<template>
  <div>
    <div class="layout">
      <div class="index-head">
        <img :src="logo" title="速报视图自动发布后台管理系统">
        <span class="index-title">速报视图自动发布后台管理系统</span>
      </div>
      <div class="index-root">
        <img :src="admin">
        <div class="index-menu" @mouseover="overmouse" @mouseleave="leavemouse">admin
          <div id="index-imgAro">
            <img :src="triangle_1">
            <img :src="triangle_2">
          </div>
          <ul class="index-menu-list">
            <li>帮助文档</li>
            <li @click="logout">注销</li>
          </ul>
        </div>
      </div>
      <Layout :style="{minHeight: '92vh'}">
        <Sider collapsible :collapsed-width="78" v-model="isCollapsed">
          <Menu active-name="1-1" theme="dark" width="auto" :class="menuitemClasses">
            <MenuItem name="1-1">
              <Icon type="ios-navigate"></Icon>
              <span>发布地震</span>
            </MenuItem>
            <MenuItem name="1-2">
              <Icon type="ios-cloud"/>
              <span @click="webPush">Web端推送</span>
            </MenuItem>
            <MenuItem name="1-3">
              <Icon type="md-phone-portrait"/>
              <span @click="phonePush">移动端推送</span>
            </MenuItem>
            <MenuItem name="1-4">
              <Icon type="ios-aperture-outline"/>
              <span @click="wechatpush">微信推送</span>
            </MenuItem>
            <!-- <MenuItem name="1-5">
              <Icon type="ios-aperture-outline"/>
              <span>历史地震</span>
            </MenuItem> -->
            <!-- <MenuItem name="1-6">
              <Icon type="ios-aperture-outline"/>
              <span @click="confirm()">自动截图</span>
            </MenuItem> -->
          </Menu>
        </Sider>
        <Layout>
          <Content>
            <div class="index-main">
              <pubMapBox></pubMapBox>
            </div>
          </Content>
        </Layout>
      </Layout>
    </div>
  </div>
</template>

<script>
import logo from "@/assets/logo/logo.png";
import admin from "@/assets/logo/admin.jpg";
import triangle_1 from "@/assets/imgicon/triangle_1.png";
import triangle_2 from "@/assets/imgicon/triangle_2.png";
import pubMapBox from "@/components/pubcomponent/pubmapBox.vue";
import pub from "@/assets/pubFile.json";
import ajax from "axios";
import { mapMutations } from "vuex";
export default {
  name: "index",
  data() {
    return {
      logo: logo,
      admin: admin,
      isCollapsed: false,
      url: "",
      triangle_1: triangle_1,
      triangle_2: triangle_2
    };
  },
  created() {
    this.loginVerify();
  },
  computed: {
    menuitemClasses: function() {
      return ["menu-item", this.isCollapsed ? "collapsed-menu" : ""];
    }
  },
  methods: {
    ...mapMutations(["setpublishUri"]),
    overmouse: function() {
      var a = document.getElementById("index-imgAro").children[0];
      var b = document.getElementById("index-imgAro").children[1];
      a.style.top = -22 + "px";
      b.style.top = -22 + "px";
    },
    leavemouse: function() {
      var a = document.getElementById("index-imgAro").children[0];
      var b = document.getElementById("index-imgAro").children[1];
      a.style.top = -2 + "px";
      b.style.top = 22 + "px";
    },
    //验证是否登录
    loginVerify() {
      ajax({
        method: "get",
        url: "http://" + pub.ip + "/subaoApi/public/index/login/isLogin",
        //允许携带cookie
        withCredentials: true
      })
        .then(res => {
          if (!res.data) {
            this.$router.push({ name: "login" });
          }
        })
        .catch(err => {
          console.error(err);
        });
    },
    //注销
    logout() {
      ajax({
        method: "get",
        url: "http://" + pub.ip + "/subaoApi/public/index/login/logout",
        //允许携带cookie
        withCredentials: true
      })
        .then(res => {
          this.$router.push({ name: "login" });
        })
        .catch(err => {
          console.error(err);
        });
    },
    //web端推送
    webPush() {
      ajax({
        method: "get",
        url: "http://" + pub.ip + "/subaoApi/public/index/Wechatpush/getdata",
        //允许携带cookie
        withCredentials: true
      })
        .then(res => {
          // 在一个新标签打开页面
          let routeUrl = this.$router.resolve({
            path: "/webHome/" + res.data + "/cthd"
          });
          window.open(routeUrl.href, "_blank");
        })
        .catch(err => {
          console.log(err);
        });
    },
    //手机端推送
    phonePush() {
      ajax({
        method: "get",
        url:
          "http://" + pub.ip + "/subaoApi/public/index/Wechatpush/getPhoneData",
        //允许携带cookie
        withCredentials: true
      })
        .then(res => {
          this.setpublishUri(res.data);
          this.$router.push({ name: "qrcode" });
        })
        .catch(err => {
          console.error(err);
        });
    },
    //微信推送
    wechatpush() {
      this.$Message.loading({
        content: "Loading...",
        duration: 0
      });
      ajax({
        method: "get",
        url:
          "http://" + pub.ip + "/subaoApi/public/index/Wechatpush/wechartPush",
        //允许携带cookie
        withCredentials: true
      })
        .then(res => {
          this.$Message.destroy();
          this.$Message.success("推送成功");
        })
        .catch(err => {
          this.$Message.destroy();
          this.$Message.error("推送失败");
          console.error(err);
        });
    },
    // 自动截图
    confirm() {
      const title = "自动截图";
      const content = "确定要现在开始自动截图吗？这可能需要一点时间...";
      this.$Modal.confirm({
        title: title,
        content: content,
        onOk: () => {
          this.$Message.info("开始自动截图...");
          ajax({
            method: "get",
            url:
              "http://" + pub.ip + "/subaoApi/public/index/Wechatpush/getdata",
            //允许携带cookie
            withCredentials: true
          })
            .then(res => {
              this.autoScreen(res.data);
            })
            .catch(err => {
              console.log(err);
            });
        },
        onCancel: () => {
          this.$Message.info("取消自动截图");
        }
      });
    },
    autoScreen(data) {
      ajax({
        method: "post",
        url: "http://localhost:3000",
        data: JSON.stringify({
          url: data
        })
      })
        .then(res => {
          this.$Message.success("截图成功");
        })
        .catch(err => {
          this.$Message.error("截图失败");
          console.error(err);
        });
    }
  },
  components: {
    pubMapBox
  }
};
</script>

<style>
.index-head {
  left: 0;
  position: relative;
}
.index-head img {
  width: 72px;
}
.index-title {
  position: absolute;
  margin-top: 6px;
  left: 80px;
  font-size: 40px;
}
.index-root {
  height: 40px;
  position: absolute;
  top: 16px;
  right: 0px;
  margin-right: 10px;
  font: 14px Helvetica Neue, Helvetica, PingFang SC, \5fae\8f6f\96c5\9ed1,
    Tahoma, Arial, sans-serif;
}
.index-root img {
  width: 40px;
  height: 40px;
  position: absolute;
  right: 80px;
}
.index-menu {
  height: 40px;
  width: 55px;
  display: inline-block;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 14px;
  color: black;
  font-weight: 500;
  opacity: 0.4;
  line-height: 19px;
  transition-delay: 400ms;
  transition-duration: 500ms;
  transition-property: all;
  transition-timing-function: ease-in-out;
  cursor: pointer;
  z-index: 2;
}
.index-menu:hover {
  opacity: 1;
}
#index-imgAro {
  width: 10px;
  height: 12px;
  position: absolute;
  top: 2px;
  right: 5px;
  overflow: hidden;
}
#index-imgAro img {
  position: relative;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
}
.index-menu-list {
  width: 0px;
  height: 0px;
  position: absolute;
  top: 0px;
  right: 40px;
  padding-left: 0px;
  margin-top: 0px;
  border: 1px rgb(187, 184, 184) solid;
  background-color: white;
  overflow: hidden;
  opacity: 0.8;
  transition-delay: 200ms;
  transition-duration: 300ms;
  transition-timing-function: ease;
  transition-property: all;
}
.index-menu:hover {
  overflow: visible;
}
.index-menu:hover .index-menu-list {
  border-top: 5px #393d49 solid;
  width: 125px;
  top: 40px;
  right: -5px;
  height: 86px;
  opacity: 1;
  z-index: 2;
}
.index-menu-list li {
  width: 100%;
  height: 40px;
  line-height: 40px;
  list-style: none;
  padding-left: 20px;
  box-shadow: 0px 0px 0px;
  opacity: 0.4;
  color: black;
  transition-duration: 800ms;
  transition-property: all;
}
.index-menu-list li:hover {
  opacity: 1;
  background-color: #f2f4f7;
}
.index-main {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
</style>
